<template>
  <div class="swiper-container" ref="swiper">
    <!-- 轮播图区域 -->
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="item in getMvImage" :key="item.imageUrl">
        <img :src="item.imageUrl" alt="33" />
      </div>
    </div>
    <!-- 小圆点 -->
    <div class="swiper-pagination"></div>
  </div>
</template>

<script>
import Swiper from "swiper";
import "swiper/css/swiper.min.css";
import { mapGetters, mapState } from "vuex";
export default {
  name: "Swiper",
  data() {
    return {
      catgory: [],
    };
  },
  mounted() {
    this.mySwiper = new Swiper(".swiper-container", {
      pagination: {
        el: ".swiper-pagination",
      },
      autoplay: true, // 自动轮播
      loop: true, //可选选项，开启循环
      immediate: true, // 让watch一上来触发
    });
  },
  // 计算属性
  computed: {
    ...mapGetters("mvinfo", ["getMvImage"]),
    ...mapState("mvinfo", ["mvImage"]),
  },
};
</script>

<style scoped>
.swiper-container img {
  width: 663px;
  height: 325px;
}
</style>